<template>
  <div class="box">
    <h2>{{ title }}</h2>
    <!-- <div class="banner"></div> -->
    <div class="product">
      <ProductItem
        class="item"
        :class="{ big: isBig(k) }"
        v-for="(v, k) of products"
        :key="k"
        :src="v.ImgUrl"
        :href="`/products/${v.ID}`"
        :title="v.Name"
        :description="v.Description"
        :price="v.Price"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import ProductItem from "./ProductItem.vue";
import { useProducts } from "../../hooks/Product";

const props = defineProps<{
  id: number;
  title: string;
}>();

const { products, getProductsByCat } = useProducts();

const isBig = (index: number) => index < 2;

(() => {
  getProductsByCat(props.id);
})();
</script>

<style lang="less" scoped>
.box {
  > * + * {
    margin-top: 0.5em;
  }

  h2 {
    padding: 1em 0;
    text-align: center;
    color: white;
    background-color: var(--second-color);
    border: 1px solid var(--border-color);
  }

  .banner {
    height: 20em;
    background-color: white;
    border: 1px solid var(--border-color);
  }

  .product {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5em;

    .item {
      background-color: white;
      border: 1px solid var(--border-color);
      overflow: hidden;
    }

    .big {
      grid-row: span 2;
      grid-column: span 2;
    }
  }
}

@media (max-width: 768px) {
  .item {
    grid-column: span 2;
    grid-row: span 2;
  }
}
</style>
